<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div{		
		width: 250px;
		height:250px;
		background: yellow;
		display: none;
	}
</style>
<script src="../debug/debug.js"></script>
<script>
	var debug;
	
	function getStyle(elem,name){
		if(elem.style[name])
			return elem.style[name];
		else if(elem.currentStyle)   //익스플로러  타입
			return elem.currentStyle[name];
		else if(document.defaultView&&document.defaultView.getComputedStyle){   //w3c호환 브라우저
			name = name.replace(/([A-Z])/g,"-$1");   //가령  textAlign 대신 text-align형태의 문법을 사용한다.
			name = name.toLowerCase();
			
			var s = document.defaultView.getComputedStyle(elem,"");
			return s&&s.getPropertyValue(name);
		}else
			return null;
	}
	
	function slideDown(elem,height){
		elem.style.height="0px";		
		show(elem);
		//var h = fullHeight(elem);
		var h = height;
		debug.displayMsg("h="+h);
		
		for(var i=0;i<100;i+=5){
			(function(){
				var pos =i;
				setTimeout(function(){
					elem.style.height=(pos/100)*h+"px";
					debug.displayMsg((pos/100)*h+"px");
				},(pos+1)*10);
			})();
		}
	}
	
	function show(elem){
		elem.style.display="block";
	}
	
	//엘리먼트의 실제높이 구하기
	function getHeight(elem){
		return parseInt(getStyle(elem,"height"));   //10px처럼 뒤에 px가 붙기 때문에 리턴값을 parseInt한다.
	}
	
	function getWidth(elem){
		return parseInt(getStyle(elem,"width"));
	}	
	
	function fullHeight( elem ) {
	    // If the element is being displayed, then offsetHeight
	    // should do the trick, barring that, getHeight() will work
	    if ( getStyle( elem, 'display' ) != 'none' )
	        return elem.offsetHeight || getHeight( elem );
	
	    // Otherwise, we have to deal with an element with a display
	    // of none, so we need to reset its CSS properties to get a more
	    // accurate reading
	    var old = resetCSS( elem, {
	        display: '',
	        visibility: 'hidden',
	        position: 'absolute'
	    });
	
	    // Figure out what the full height of the element is, using clientHeight
	    // and if that doesn't work, use getHeight
	    var h = elem.clientHeight || getHeight( elem );
	
	    // Finally, restore the CSS properties back to what they were
	    restoreCSS( elem, old );
	
	    // and return the full height of the element
	    return h;
	}
	
	// Find the full, possible, width of an element (not the actual,
	// current, width)
	function fullWidth( elem ) {
	    // If the element is being displayed, then offsetWidth
	    // should do the trick, barring that, getWidth() will work
	    if ( getStyle( elem, 'display' ) != 'none' )
	        return elem.offsetWidth || getWidth( elem );
	
	    // Otherwise, we have to deal with an element with a display
	    // of none, so we need to reset its CSS properties to get a more
	    // accurate reading
	    var old = resetCSS( elem, {
	        display: '',
	        visibility: 'hidden',
	        position: 'absolute'
	    });
	
	    // Figure out what the full width of the element is, using clientWidth
	    // and if that doesn't work, use getWidth
	    var w = elem.clientWidth || getWidth( elem );
	
	    // Finally, restore the CSS properties back to what they were
	    restoreCSS( elem, old );
	
	    // and return the full width of the element
	    return w;
	}
	
	// A function used for setting a set of CSS properties, which
	// can then be restored back again later
	function resetCSS( elem, prop ) {
	    var old = {};
	
	    // Go through each of the properties
	    for ( var i in prop ) {
	        // Remember the old property value
	        old[ i ] = elem.style[ i ];
	
	        // And set the new value
	        elem.style[ i ] = prop[i];
	    }
	
	    // Retun the set of changed values, to be used by restoreCSS
	    return old;
	}
	
	// A function for restoring the side effects of the resetCSS function
	function restoreCSS( elem, prop ) {
	    // Reset all the properties back to their original values
	    for ( var i in prop )
	        elem.style[ i ] = prop[ i ];
	}
	
	window.onload=function(e){
		debug = new DebugConsole();
		
		var elem = document.getElementById("elem");
		document.getElementsByTagName("button")[0].onclick=function(e){
			slideDown(elem,parseInt(getStyle(elem,"height")));
		}
		
		
	}
</script>
</head>
<body>
	<div id="elem"></div>
	<button>show  element</button>
</body>
</html>